@use 'sass:map';
@use '@angular/material' as mat;


@mixin ngm-story-widget($config-or-theme) {
  $config: mat.get-color-config($config-or-theme);
  $background: map.get($config, background);
  $foreground: map.get($config, foreground);
  $primary: map.get($config, primary);
  $accent: map.get($config, accent);

  $grid-divider: 1px dashed map.get($foreground, divider);

  .ngm-story-widget {
    border-radius: unset;
    outline-style: none;

    .ngm-story-widget__fab-menu {
      visibility: hidden;
    }

    &.ngm-story-widget__active {
      .ngm-story-widget__fab-menu {
        visibility: visible;
      }
    }

    /* 是 card 组件 */
    .ngm-story-widget__content {
      &.ngm-story-widget__card, &.ngm-story-widget__table {
        // background: mat.get-color-from-palette($background, card);
        // color: mat.get-color-from-palette($foreground, text);
        overflow: hidden;
        border-radius: 5px;
        // box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
      }
    }
    
    .ngm-story-widget__component-placeholder {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: hsl(34, 100%, 90%);
    }

    &.ngm-story-widget__fullscreen {
      height: 100%;
      .ngm-story-widget__content {
        background: mat.get-color-from-palette($background, card);
      }
    }

    .ngm-story-widget__component-container > :first-child {
      flex: 1;
      max-width: 100%;
    }
  }
}

@mixin ngm-story-widget-overlay($config-or-theme) {
  .ngm-story-widget__comments {
    --editor-container-height: 10rem;
    .ngm-story-widget__comment-editor {
      .ql-container {
        height: var(--editor-container-height);
      }
    }
  }
}
